<template>
  <div class="user-center">
    <template v-if="isLogin">
      <!-- 用户头部信息 -->
      <div class="user-header">
        <img class="avatar" size="22" :src="userInfo.avatar" alt="用户头像"/>
        <div class="user-info" style="margin-left: 5px;">
          <div class="username">{{ userInfo.nickname }}</div>
        </div>
        <van-tag style="margin-left: 7px;" type="danger" @click.stop="logout" plain>注销</van-tag>
      </div>
      <!-- 用户中心菜单 -->
      <van-grid
          :column-num="3"
          :border="false"
          class="user-menu"
      >
        <van-grid-item
            v-for="item in menuList"
            :key="item.name"
            :text="item.name"
            :icon="item.icon"
            @click="handleMenuClick(item)"
        />
      </van-grid>
      <!-- 用户喜欢的内容 -->
      <div class="user-likes">
        <div class="title">喜欢</div>
        <div class="user-like-container">
          <div
              v-for="item in likeList"
              :key="item.id"
              class="user-like-item"
              @click.stop="goToDetailNews(item.id)"
          >
            <van-image
                :width="80"
                :height="80"
                :src="item.imageUrl"
                fit="cover"
                radius="4"
            >
              <template v-slot:error>加载失败</template>
            </van-image>
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <!-- 用户历史记录 -->
      <div class="user-history">
        <div class="title">历史记录</div>
        <van-list>
          <van-cell
              v-for="item in historyList"
              :key="item.id"
              :title="item.title"
              :label="item.date"
              :thumb="item.cover"
              :is-link="true"
              @click="handleHistoryClick(item)"
          />
        </van-list>
      </div>
    </template>
    <template v-else>
      <van-empty description="请先登陆">
        <van-button round type="primary" @click="login" class="bottom-button">点击登陆</van-button>
      </van-empty>
    </template>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {getUserLoginStatus} from "@/utils/userIsLogin";
import {getLikeNewsList} from "@/api/news";
import {showFailToast, showToast} from "vant";
import {useRouter} from "vue-router";
import {getUserInfo} from "@/api/login";
const router = useRouter();
// 用户信息
const userInfo = ref({});
// 用户是否登陆
const isLogin = ref(false);
//获取用户信息的方法
const getUserInfoApi = async () => {
  if (!isLogin.value) return;
  try {
    const res = await getUserInfo();
    if (res.msg === '请求成功') {
      userInfo.value = res.data;
      return
    }
  } catch (e) {
    console.log(e)
    showFailToast('获取用户信息失败')
  }
}
//查看用户是否登陆
const checkIsLogin = () => {
  const userInfo = getUserLoginStatus();
  if (userInfo) {
    isLogin.value = true;
  } else {
    isLogin.value = false;
  }
}

// 获取用户喜欢的新闻列表
const getUserLikeNewsList = async () => {
  if (!isLogin.value) return;
  try {
    const res = await getLikeNewsList();
    console.log(res)
    if (res.msg === '请求成功') {
      const result = res.data.map(item => item.news)
      likeList.value = result || [];
      console.log(likeList.value)
      return
    }
  } catch (e) {
    console.log(e);
    showFailToast('获取用户喜欢的新闻列表失败');
  }
}

// 初始化
const mineInit = async () => {
  checkIsLogin();
  await getUserInfoApi();
  await getUserLikeNewsList();
}
onMounted(() => {
  mineInit();
})
// 前往详情页面
const goToDetailNews = (id) => {
  if (!isLogin.value) {
    showToast('请先登陆')
    return
  }
  router.push({path: `/news/${id}`,})
}

// 菜单列表
const menuList = [
  {
    name: '粉丝',
    icon: 'chat-o',
  },
  {
    name: '喜欢',
    icon: 'like-o',
  },
  {
    name: '历史记录',
    icon: 'clock-o',
  },
]
// 用户喜欢的内容列表
const likeList = ref([
  {
    id: 1,
    title: 'Vue3 and Vant Demo',
    imgUrl: 'https://picsum.photos/id/1018/400/400',
  },
  {
    id: 2,
    title: 'React vs Vue Comparison',
    imgUrl: 'https://picsum.photos/id/1025/400/400',
  },
  {
    id: 3,
    title: 'JavaScript Basics',
    imgUrl: 'https://picsum.photos/id/1069/400/400',
  },
  {
    id: 4,
    title: 'HTML and CSS',
    imgUrl: 'https://picsum.photos/id/1084/400/400',
  },
]);
// 用户历史记录列表
const historyList = ref([
  {
    id: 1,
    title: 'Vue3 and Vant Demo',
    cover: 'https://picsum.photos/id/1018/400/400',
    date: '2023-04-08',
    url: '/demo',
  },
  {
    id: 2,
    title: 'React vs Vue Comparison',
    cover: 'https://picsum.photos/id/1025/400/400',
    date: '2023-04-07',
    url: '/comparison',
  },
  {
    id: 3,
    title: 'JavaScript Basics',
    cover: 'https://picsum.photos/id/1069/400/400',
    date: '2023-04-06',
    url: '/basics',
  },
  {
    id: 4,
    title: 'HTML and CSS Crash Course',
    cover: 'https://picsum.photos/id/1084/400/400',
    date: '2023-04-05',
    url: '/crash-course',
  },
]);
// 处理菜单点击事件
const handleMenuClick = (item) => {
  console.log('click menu', item);
};
// 处理历史记录点击事件
const handleHistoryClick = (item) => {
  console.log('click history', item);
};
// 登陆
const login = () => {
  router.push({path: '/login'})
}
// 退出登陆
const logout = () => {
  console.log(111)
  sessionStorage.clear();
  checkIsLogin();
}
</script>

<style scoped lang="scss">

.user-center {
  padding: 20px;
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .username {
      font-size: 18px;
      font-weight: bold;
    }

    .fans {
      color: #999;
    }
  }
}

.user-menu {
  margin-bottom: 20px;
}

.user-likes {
  width: 700px;
  margin: 0 auto 20px;

  .user-like-container {
    width: 700px;
    max-height: 700px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;

    .user-like-item {
      display: flex;
      flex-direction: column;
      align-items: center;


      .title {
        font-size: 14px;
        margin-top: 10px;
      }
    }
  }
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.user-history {
  margin-bottom: 20px;
}

.bottom-button {
  width: 320px;
  height: 80px;
}
</style>
